<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    class="container"
    style="font-size: 0.8rem;"
    width="100%"
  >
    <div v-if="value!=null">
      <el-table
        :data="datas"
        border
        tooltip-effect="dark"
      >
        <el-table-column
          label="订单编号" width="120" align="center"
        >
          <template slot-scope="scope">{{ scope.row.sn }}</template>
        </el-table-column>
        <el-table-column label="下单时间" width="150" prop="createTime" align="center">
        </el-table-column>

        <el-table-column
          label="商品信息" width="110">
          <template slot-scope="scope">
            <h-good-info-display v-model="scope.row" :displayInfo="false"></h-good-info-display>
          </template>
        </el-table-column>

        <el-table-column label="商品规格" min-width="100">
          <template slot-scope="scope">
            <h-specs-display v-model="scope.row"></h-specs-display>
          </template>
        </el-table-column>

        <el-table-column label="订单信息" min-width="200">
          <template slot-scope="scope">
            <h-order-info-display v-model="scope.row" :create-time="false"></h-order-info-display>
          </template>
        </el-table-column>


        <el-table-column
          label="订单金额"
          min-width="150">
          <template slot-scope="scope">
            <h-order-pay-info-display v-model="scope.row"/>
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center" width="120">
          <template slot-scope="scope">
            <h-order-status-display v-model="scope.row" :arrival="true" :pay="true"
                                    :apply="true"></h-order-status-display>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="h-form">
      <div class="form-label" style="vertical-align: top;">
        选择发货地址:
      </div>
      <div class="form-content">
        <div v-for="address in addresses" :key="address.id">
          <el-radio v-model="addressId" :label="address.id">
            联系人:{{address.concat}} 电话:{{address.mobile}} 地址:{{address.district}} {{address.address}}
            邮编:{{address.zipcode}}
            <span v-if="address.isDefault==1"> [默认]</span>
          </el-radio>
        </div>

      </div>
    </div>

    <div v-if="value!=null" slot="footer" style="text-align: center">
      <el-button type="primary" v-if="value.apply!=1" :loading="loading" @click="doDelivery"> 确定要发货</el-button>
      <el-button @click="closed"> 关闭</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'

  export default {
    name: 'HOrderApplyDialog',
    mixins: [Dialog],
    components: {HOrderStatusDisplay, HGoodInfoDisplay, HSpecsDisplay, HOrderInfoDisplay, HOrderPayInfoDisplay},
    data() {
      return {
        datas: [],
        loading: false,
        addresses: [],
        addressId: null,
      }
    },
    watch: {
      value: function (c, d) {
        this.datas = c
      }
    },
    props: {
      value: {
        type: Array,
        default: null
      }
    },
    methods: {
      getAddress: function () {
        const me = this
        FrontService.userAddresses().then(ds => {
          if (ds != null) {
            me.addresses = ds.datas
            me.addresses.map(d => {
              if (d.isDefault == 1) {
                me.addressId = d.id
              }
            })
          }
        })
      },
      doDelivery: function () {
        const me = this
        if (me.addresses.length == 0) {
          me.$message.error('请先在 [个人信息] 中添加收货地址。')

        } else {
          if (me.addressId == null) {
            me.$message.error('请先选择一个收货地址。')
          } else {
            const ids = me.value.map(ds => {
              return ds.id;
            })
            const data = {
              orderIds: ids,
              addressId: me.addressId,
              note: ''
            }
            me.loading = true
            FrontService.ordersApply(data).then(d => {
              if (d != null) {
                me.$message.success('申请发货成功!')
                me.$emit('success', me.datas)
              }
              me.loading = false
            })
          }
        }
      }

    },
    mounted: function () {
      this.getAddress()
    }
  }
</script>
